<template>
  <div>
    <button @click="flag = !flag">切换</button>
    <A v-move:aaa.xsf="{ background: 'gray', flag }" />
  </div>
</template>

<script setup lang="ts">
import { Directive, DirectiveBinding } from "vue";
import A from "./A.vue";

const flag = ref(true);

interface Dir {
  background: string;
  flag: boolean;
}

// 指令-生命周期：
// 必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
// created 元素初始化的时候
// beforeMount 指令绑定到元素后调用 只调用一次
// mounted 元素插入父级dom调用
// beforeUpdate 元素被更新之前调用
// update 这个周期方法被移除改用updated
// beforeUnmount 在元素被移除前调用
// unmounted 指令被移除后调用 只调用一次

// 自定义指令-对象模式
const vMove: Directive = {
  created() {
    console.log("自定义指令被创建===>");
  },

  beforeMount() {
    console.log("自定义指令被绑定到元素前===>");
  },

  mounted(el: HTMLElement, dir: DirectiveBinding<Dir>) {
    console.log("自定义指令被绑定到元素后调用===>");

    // console.log("使用自定义指令的元素", el);
    // console.log("使用自定义指令的参数", dir.value);
    el.style.background = dir.value.background;
  },

  beforeUpdate() {
    console.log("自定义指令 传入的数据 被更新前===>");
  },

  updated() {
    console.log("自定义指令 传入的数据 被更新后===>");
  },

  beforeUnmount() {
    console.log("自定义指令被移除前===>");
  },

  unmounted() {
    console.log("自定义指令被移除后===>");
  },
};
</script>

<style scoped></style>
